<template>
  <el-dialog :title="'部分结账'" :close-on-click-modal="false" :visible.sync="visible" :append-to-body="true">
    <el-row>
      <el-col :span="10" style="margin-right: 10px;">
        <el-form :model="dataForm" :rules="dataRule" ref="dataForm" label-width="80px">
          <el-form-item size="small" label="入账账号">
            <el-select v-model="dataForm.peopleId" placeholder="请选择">
              <el-option v-for="item in options.peopleOptions" :key="item.name" :label="item.roomNum + '-' + item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item size="small" label="付款方式">
            <el-select v-model="dataForm.nowType" placeholder="请选择">
              <el-option v-for="item in options.paysTypeOptions" :key="item.name" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="金额" prop="payPrice"><el-input v-model="dataForm.payPrice" placeholder="金额"></el-input></el-form-item>
          <el-form-item label="备注" prop="remarks"><el-input type="textarea" :rows="2" v-model="dataForm.remarks" placeholder="备注"></el-input></el-form-item>
        </el-form>
      </el-col>
      <el-col :span="13" style="position: relative;border-left: 1px dashed rgb(204, 204, 204);padding-left: 10px;overflow-y: auto;">
        <el-table :data="arr" style="width: 100%;min-height: 215px;max-height: 215px;">
          <el-table-column prop="payPrice" header-align="center" align="center" label="科目/方式">
            <template slot-scope="scope">
              <!-- 科目 -->
              <!-- 账单类型（0预收账款1信用卡授权2消费3押金4房费5预收退款6结账收款7结账退款8退押金） -->
              <div v-if="scope.row.payType == 0">
                <span>预收账款/{{ scope.row.nowTypeName }}</span>
              </div>
              <div v-if="scope.row.payType == 1"><span>预授权</span></div>
              <div v-if="scope.row.payType == 2">
                <span>{{ scope.row.consumeName }}</span>
              </div>
              <div v-if="scope.row.payType == 3"><span>押金</span></div>
              <div v-if="scope.row.payType == 4"><span>房费</span></div>
              <div v-if="scope.row.payType == 5">
                <span>预收退款/{{ scope.row.nowTypeName }}</span>
              </div>
              <div v-if="scope.row.payType == 6">
                <span>结账收款/{{ scope.row.nowTypeName }}</span>
              </div>
              <div v-if="scope.row.payType == 7">
                <span>结账退款/{{ scope.row.nowTypeName }}</span>
              </div>
              <div v-if="scope.row.payType == 8"><span>退押金</span></div>
            </template>
          </el-table-column>
          <el-table-column prop="payPrice" header-align="center" align="center" label="金额"></el-table-column>
        </el-table>
        <div class="common_prompt position clear_float" style="bottom: 0px;">
          <div class="pull">
            <span>消费:￥{{xiaofei}}</span>
            <span>付款:￥{{fukuanm}}</span>
          </div>
          <div class="push">
            <span>余额:￥{{ xiaofei - fukuanm }}</span>
          </div>
        </div>
      </el-col>
    </el-row>

    <span class="dialog-footer" slot="footer">
      <el-button @click="visible = false">{{ $t('Common.Cancel') }}</el-button>
      <el-button type="primary" @click="dataFormSubmit(6)">{{ $t('Common.Confirm') }}</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      xiaofei:0,
      fukuanm:0,
      dataListLoading: false,
      fukuan: 2,
      dataList: [],
      arr: [],
      shopDataList: [],
      options: {
        paysTypeOptions: [],
        peopleOptions: []
      },
      dataForm: {
        id: 0,
        sellerId: '',
        consumeId: '',
        payType: '',
        creatTime: '',
        payPrice: 0,
        banks: '',
        banksNumber: '',
        referenceNumber: '',
        termValidity: '',
        peopleId: '',
        remarks: '',
        nowType: '',
        type: ''
      },

      dataRule: {
        sellerId: [{ required: true, message: '商家不能为空', trigger: 'blur' }]
      },
      activeName: 'first',
      visible: false,
      info: {}
    };
  },
  methods: {
    shopChange(arr) {
      var i = 0;
      this.xiaofei = 0;
      this.fukuanm = 0;
      arr.forEach(item => {
        // 账单类型（0预收账款1信用卡授权2消费3押金4房费5预收退款6结账收款7结账退款8退押金）
        if(item.payType == 2){
          this.xiaofei += parseFloat(item.payPrice);
        }if(item.payType == 4){
          this.xiaofei += parseFloat(item.payPrice);
        }if(item.payType == 0){
          this.fukuanm += parseFloat(item.payPrice);
        }
      });

      //计算价格
      this.dataForm.payPrice = this.xiaofei - this.fukuanm;

    },
    init(arr, peopleId, singleId) {
      this.arr = arr;
      this.shopChange(arr);
      this.visible = true;
      this.info.singleId = singleId;
      this.getPayTypes();
      this.getPeopls();
      this.$forceUpdate();
      this.$nextTick(() => {
        this.dataForm.peopleId = peopleId;
      });
    },
    //获取支付方式
    getPayTypes() {
      this.$http({
        url: this.$http.adornUrl('/hotel/thotelfloorroompaytype/list'),
        method: 'get',
        params: this.$http.adornParams({
          page: 1,
		  state: 1,
          limit: 999
        })
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.options.paysTypeOptions = data.page.list;
          this.dataForm.nowType = this.options.paysTypeOptions[0].id;
        } else {
          this.options.paysTypeOptions = [];
        }
      });
    },
    //获取入账账号
    getPeopls() {
      this.$http({
        url: this.$http.adornUrl(`/hotel/thotelfloorroomcheckinsingle/pop_people/${this.info.singleId}`),
        method: 'get',
        params: this.$http.adornParams()
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.options.peopleOptions = data.data;
        } else {
          this.options.peopleOptions = [];
        }
      });
    },
    handleClick(tab, res) {},
    // 表单提交
    dataFormSubmit(type) {
      var idArr = [];
      this.arr.forEach(item => {
        idArr.push(item.id);
      });
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl(`/hotel/thotelfloorroomcheckinaccounting/${!this.dataForm.id ? 'save' : 'update'}`),
            method: 'post',
            data: this.$http.adornData({
              payType: type,
              payPrice: this.dataForm.payPrice,
              banks: this.dataForm.banks,
              banksNumber: this.dataForm.banksNumber,
              referenceNumber: this.dataForm.referenceNumber,
              consumeId: this.dataForm.consumeId,
              termValidity: this.dataForm.termValidity,
              peopleId: this.dataForm.peopleId,
              remarks: this.dataForm.remarks,
              nowType: this.dataForm.nowType,
              fukuan: this.fukuan,
              submitType: 2,
              submitIds: idArr.join(','),
              type: 1
            })
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$nextTick(() => {
                this.$emit('refreClosing');
              });
              this.visible = false;
              this.$message({
                message: this.$t('Common.OperationSuccessful'),
                type: 'success',
                duration: 1500,
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        }
      });
    }
  }
};
</script>

<style></style>
